<template>
  <section class="main-content">

    <div class="section-cont main-con mt-10 mb-20">
      <el-row class="section-container" align="middle" :gutter="20">
        <el-col class="mb-20" :span="2">
          <div class="grid-content text-center">
            <div><el-icon title="点赞"><StarFilled /></el-icon></div>
            <div><el-icon title="分享"><Share /></el-icon></div>
            <div>打赏</div>
          </div>
        </el-col>
        <el-col class="mb-20 article-content" :span="16">
          <div class="grid-content">
            <h2>小鸟自述</h2>
            <div style="border-bottom: 1px solid #ccc">
              2022 10 11
            </div>
            <div style="background: #efefef;text-indent: 2em;">

              <p style="padding:0 10px;line-height: 2em;">
                <span><span style="font-size: 20px;background: rgb(0, 0, 0);color: rgb(255, 255, 255);margin: 0 5px;">2013</span>年，我作为程序猿的元年。</span>
                <br/>还记得接触的第一个项目 ThinkSNS， 还记得当时一起奋斗的小伙伴，还有印象深刻的领导韦心红，以及遥控我们的BOSS刘晓庆。
                <br />刚开始编程学习的是PHP，和学校学的java差异很大，还记得当时连续一个月的挑灯夜战。还记得当时领导分配任务时候的诚惶诚恐。但是我是真的快乐，从那是开始我不在迷茫，我不再向刚毕业的时候一样，我找到了我今后很长很长一段时间要走的路。
                <br/>我喜欢这个职业。我很高兴成为万千开发者中的一员。</p>
            </div>
            <div style="text-indent: 2em;line-height: 2em;">
              <p>回顾自己的职业生涯，我将他分成三个阶段，初级学习，熟练掌握，延申掌握。</p>
              <hr>
              <span style="font-size: 14px;color: rgb(30 72 250);">初级学习:2012-2014</span>
              <p>
                2012年开始，我有意识的去搜集，去学习网站方面的知识，见识到当时CMS的强大，让我产生了，学习网站一整套做法的念头。12年开始自学JS。开始去看PHP的知识，应为作为网站开发，PHP是大拇指这个。经过自己的努力，终于在13年得到我的经理韦心红的认可，正式入职苏州智作软件，走上了程序开发之路。从接手任务时的坎坷，到程序功能开发时间的精准定位，从功能开发按照自己的思路来最后和我的产品互怼，到能给产品交互和设计提供一定建议。
                从第一次给APP写接口，从第一次优化代码性能，从第一次前后端分离，从网站开发到微信开发，从第一次接触电商，我渐渐的渡过了我开发的第一个阶段。
              </p>
              <span style="font-size: 14px;color: rgb(30 72 250);">熟练掌握:2014-2015</span>
              <p>
                这一年时间，虽然很短，但是在我的职业道路中真的很重要，这一年的积累让我对程序开发有了更深刻的理解。从代码性能，从面向对象，从抽象，从程序设计，等等的认识都进一步深入，这一年我印象最深刻的就挑灯看代码。
              </p>
              <span style="font-size: 14px;color: rgb(30 72 250);">延申掌握:2015-2017</span>
              <p>
                从之前的零星接触服务器。从之前的按部就班的部署开发环境，从之前刻板的复刻运行环境。这段时间我开始真正的理解真正的学习到服务器，缓存，数据库，等内容。从使用到优化从这个时候开始，我才真正的合格了。
              </p>
              <hr>
              <p>
                时代在进步，我的职业道路在17年也仅仅是跟上了脚本，但是被大的洪流裹挟我站在现在看过去，我才真的知道自己的渺小。各种技术的革新，程序的种种迭代，新语言的雨后春笋，前后端的分离，前端的突飞猛进，服务器技术的巨变，运行环境，容器化，等等等等。我意识到，作为程序猿最可贵的不是你会什么，而且你对知识的渴求，对学习的坚持不歇。
              </p>
              <p style="background: #3358ef;color: #fff;text-align: center;">给作为程序猿的我们点个赞。真的没有哪个职业比我们需要学习的内容更多了。</p>
            </div>
          </div>
        </el-col>
        <el-col class="mb-20" :span="6">
          <div v-if="hotArticle.length>0" class="grid-content">
            <ul>
              <li><span class="mb-10" style="font-size:18px;">最新发布:</span></li>
              <li v-for="item in hotArticle" v-bind:key="item" @click="urlto( 'article?id='+ item.id)">
                <a style="color:var(--color-gray)">{{ item.title }} <span class="f-r mr-8">{{ item.category.title }}</span></a>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </section>
</template>
<script>
export default {
  name: "self.vue",
  components: {
  },
  data() {
    return {
      hotArticle:sessionStorage.getItem('access-hotArticle')?JSON.parse(sessionStorage.getItem('access-hotArticle')):[],
    }
  },
  watch:{

  },
  async created(){
    await this.getDataByApi();
  },
  mounted() {
    console.log(this.article)
  },
  methods: {
    async getDataByApi(){
      if(this.hotArticle.length === 0) {
        await this.$API.home.getHotArticle({istop: 1, ishot: 1, limit: 8}).then(res => {
          if (res.message === "OK") {
            this.hotArticle = res.data
          } else {
            this.$message.error('接口失效')
            return false;
          }
        })
      }
    },

    paramsGet(key){
      const params = {};
      if(key.includes("&")){
        const mParams = key.split('&')
        for(const item in mParams){
          const temp = mParams[item].split('=')
          params[temp[0]] = temp[1]
        }
      }else{
        const temp = key.split('=')
        params[temp[0]] = temp[1]
      }
      return params;
    },

    urlto(key){
      console.log('jump:'+ key)
      if(key.includes("?")){
        const keyPath =  key.split('?')
        this.$router.push({name:keyPath[0],params:this.paramsGet(keyPath[1])}).catch(err => {
          console.log(err)
        })
      }else{
        this.$router.push({name:key}).catch(err => {
          console.log(err)
        })
      }
    }
  }
}
</script>

<style typeof="scss" scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.main-content{
  margin-top: 100px;
}
.main-content .section-cont{
  margin: auto;
  width: var(--web-width);
}
.main-content .section-container{
  display: flex;
  justify-content: space-between;
  margin: auto;
  width: var(--web-width);
  line-height: 30px;
  letter-spacing: -.03em;
  overflow:hidden;
}

.ls-add ul{
  background: #dedede;
  border-radius: 4px;
  overflow: hidden;
}
.ls-add ul li{
  float: left;
  margin: 0 35px
}
.ls-add ul li a{
  color:#ffffff;
}
.ls-add ul li:hover a{
  color: var(--color-red)
}
.ls-add ul li a span{

}
.main-con .section-container{
  background: var(--color-lightGrey);
  align-items: baseline;
}
.main-con .section-container .article-content{
  background-color: rgb(255, 255, 255);
  margin: 20px 0;
  border-radius: 4px;
  min-height:500px;
}
</style>